<template>
  <div id="shopServe" class="main" v-loading="listLoading">
    <div class="contaier">
      <div>
        <div class="left-list" v-for="item in shopServeList" :key="item.id">
          <div><img :src="item.picUrl ? item.picUrl : noGood" alt="" /></div>
          <div class="info">
            <div class="goods-title curr" @click="handleGoodsTitle(item)">
              {{ item.name }}
            </div>
            <div>
              <span style="color: #f56c6c"
                >￥
                <span style="font-size: 22px; margin-right: 20px">{{
                  item.realPrice
                }}</span>
              </span>
              <span style="color: #999; text-decoration: line-through"
                >原价 ￥ {{ item.basePrice }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="shopServeList.length <= 0">暂无数据</div>
      <teacher-team :expertsTeamList="expertsTeamList" />
    </div>
  </div>
</template>

<script setup>
import { getGoodsList, getExpertsTeamList } from '@/api/shopServe/shopServe';
import TeacherTeam from './components/TeacherTeam';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import noGood from '@/assets/images/noGood.png';

const router = useRouter();
const expertsTeamList = ref([]);
const listLoading = ref(false);
const shopServeList = ref([]);
const handleGoodsTitle = (item) => {
  console.log('item:', item);
  if (item.bigTypeName == '志愿讲堂') {
    router.push({
      path: '/zYshopDet',
    });
    return;
  }
  router.push({
    path: '/shopserve/shopDet',
    query: {
      id: item.id,
    },
  });
};
const fetchGoodsList = () => {
  listLoading.value = true;
  getGoodsList({ fronttype: 2 })
    .then((res) => {
      if (res.data.code == 20000) {
        shopServeList.value = res.data.data;

        listLoading.value = false;
      } else {
        listLoading.value = false;
      }
    })
    .catch(() => {
      listLoading.value = false;
    });
};
const fetchExpertsTeamList = () => {
  getExpertsTeamList().then((res) => {
    if (res.data.code == 20000) {
      expertsTeamList.value = res.data.data.slice(0, 3);
    }
  });
};
fetchGoodsList();
fetchExpertsTeamList();
</script>

<style lang="scss" scoped>
#shopServe {
  padding: 20px;
  // height: calc(100vh - 261px);
  height: 100%;
  // overflow: hidden;
  .contaier {
    display: flex;
    justify-content: space-between;
  }
  .goods-title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
  }
  .left-list {
    display: flex;
    margin: 20px 0;
    .info {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    img {
      width: 170px;
      // height: 130px;
    }
  }
  .right-teach {
    width: 300px;

    .bar {
      height: 24px;
      border-left: 4px solid var(--color-text);
      padding-left: 10px;
    }
    .bar-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .more {
        color: var(--color-text);
      }
    }
  }
  .teach-team {
    .team-item {
      display: flex;
      align-items: center;
      margin: 20px 0 10px 0;
    }
    .right-brief {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
